<script setup lang="ts">
import Statistics from '@/components/statistics/index.vue'
import { apiCountDeptCount } from '@/api/count.ts'
import { jump } from '@/utils/util.ts'
import { getRoutePath } from '@/router'

const tableRef = shallowRef()

const pager = reactive({
    loading: false,
    lists: [] as any,
    header: []
})

const queryParams = reactive({
    pay_time:''
})

const resetParams = () => {
    queryParams.pay_time = ''
    loadList()
}

const loadList = async () => {
    pager.loading = true
    const res = await apiCountDeptCount(queryParams)
    res.title[0].className = 'ca'
    res.title[0].fixed = 'left'
    res.title[0].width = 200
    pager.header = res.title
    pager.lists = res.data
    pager.loading = false
}

const handleCellClick = (data:any) => {
    if(data.columnIndex == 0 || !data.row.json) return
    console.log(pager.header,data.row.json)
    jump(getRoutePath('budget.bottomTable/index'),{
        ...data.row.json,
        ...pager.header[data.columnIndex]?.json,
        pay_time: queryParams.pay_time
    })
}

const exportEvent = async () =>{
    const $table = tableRef.value.tableRef
    await nextTick()
    console.log($table)
    if ($table) {
        $table.openExport()
    }
}

onMounted(() => {
    loadList()
})
</script>

<template>
    <statistics ref="tableRef" :pager="pager" :defWidth="100" @cellClick="handleCellClick">
        <template #header>
            <el-form ref="formRef" class="mb-[-16px]" label-width="70px" :model="queryParams" :inline="true">
                <el-form-item label="流水时间">
                    <el-date-picker
                        clearable
                        v-model="queryParams.pay_time"
                        value-format="X"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="请输入流水时间"
                        :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadList">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
<!--                    <el-button @click="exportEvent" v-perms="[`finance.count/deptExport`]">导出</el-button>-->
                    <export
                        :params="queryParams"
                        v-perms="[`finance.count/deptExport`]"
                        name="导出"
                        api="finance.count/deptExport"
                    />
                </el-form-item>
            </el-form>
        </template>
    </statistics>
</template>

<style scoped lang="scss">

</style>
